﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
  <title>乐优商城--商品详情页</title>
  <link rel="icon" href="/assets/img/favicon.ico">

  <link rel="stylesheet" type="text/css" href="/css/webbase.css"/>
  <link rel="stylesheet" type="text/css" href="/css/pages-item.css"/>
  <link rel="stylesheet" type="text/css" href="/css/pages-zoom.css"/>
  <link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css"/>

  <style type="text/css">
    .goods-intro-list li {
      display: inline-block;
      width: 300px;
    }

    .Ptable {
      margin: 10px 0;
    }

    .Ptable-item {
      padding: 12px 0;
      line-height: 220%;
      color: #999;
      font-size: 12px;
      border-bottom: 1px solid #eee;
    }

    .Ptable-item h3 {
      width: 110px;
      text-align: right;
    }

    .Ptable-item h3, .package-list h3 {
      font-weight: 400;
      font-size: 12px;
      float: left;
    }

    h3 {
      display: block;
      font-size: 1.17em;
      -webkit-margin-before: 1em;
      -webkit-margin-after: 1em;
      -webkit-margin-start: 0px;
      -webkit-margin-end: 0px;
      font-weight: bold;
    }

    .Ptable-item dl {
      margin-left: 110px;
    }

    dl {
      display: block;
      -webkit-margin-before: 1em;
      -webkit-margin-after: 1em;
      -webkit-margin-start: 0px;
      -webkit-margin-end: 0px;
    }

    .Ptable-item dt {
      width: 160px;
      float: left;
      text-align: right;
      padding-right: 5px;
    }

    .Ptable-item dd {
      margin-left: 210px;
    }

    dd {
      display: block;
      -webkit-margin-start: 40px;
    }

    .package-list {
      padding: 12px 0;
      line-height: 220%;
      color: #999;
      font-size: 12px;
      margin-top: -1px;
    }

    .package-list h3 {
      width: 130px;
      text-align: right;
    }

    .package-list p {
      margin-left: 155px;
      padding-right: 50px;
    }
  </style>

</head>

<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<div id="itemApp">
  <div id="nav-bottom">
    <ly-top/>
  </div>
  <div class="py-container">
    <div id="item">
      <div class="crumb-wrap">
        <!--顶部面包屑-->
        <ul class="sui-breadcrumb">
          <li v-for="c in categories">
            <a :href="'/category/' + c.id + '.html'" v-text="c.name"></a>
          </li>
          <li>
            <a :href="'/brand/' + brand.id + '.html'" v-text="brand.name"></a>
          </li>
          <li class="active" v-text="name"></li>
        </ul>
      </div>
      <!--product-info-->
      <div class="product-info">
        <div class="fl preview-wrap">
          <!--放大镜效果-->
          <div class="zoom">
            <!--默认第一个预览-->
            <div id="preview" class="spec-preview">
							<span class="jqzoom">
								<img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/>
							</span>
            </div>
            <!--下方的缩略图-->
            <div class="spec-scroll">
              <a class="prev">&lt;</a>
              <!--左右按钮-->
              <div class="items">
                <ul>
                  <li v-for="(img,i) in images" :key="i">
                    <img :src="img" :bimg="img" onmousemove="preview(this)"/>
                  </li>
                </ul>
              </div>
              <a class="next">&gt;</a>
            </div>
          </div>
        </div>
        <!--商品信息-->
        <div class="fr itemInfo-wrap">
          <div class="sku-name">
            <h4 v-text="sku.title"></h4>
          </div>
          <div class="news"><span>推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</span></div>
          <div class="summary">
            <div class="summary-wrap">
              <div class="fl title"><i>价　　格</i></div>
              <div class="fl price">
                <i>¥</i><em v-text="ly.formatPrice(sku.price)"></em><span>降价通知</span>
              </div>
              <div class="fr remark"><i>累计评价</i><em>612188</em></div>
            </div>
            <div class="summary-wrap">
              <div class="fl title">
                <i>促　　销</i>
              </div>
              <div class="fl fix-width">
                <i class="red-bg">加价购</i>
                <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
                  购热销商品</em>
              </div>
            </div>
          </div>
          <div class="support">
            <div class="summary-wrap">
              <div class="fl title">
                <i>支　　持</i>
              </div>
              <div class="fl fix-width">
                <em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em>
              </div>
            </div>
            <div class="summary-wrap">
              <div class="fl title">
                <i>配 送 至</i>
              </div>
              <div class="fl fix-width">
                <em class="t-gray">上海 <span>有货</span></em>
              </div>
            </div>
          </div>
          <div class="clearfix choose">
            <!--sku选项-->
            <div id="specification" class="summary-wrap clearfix" v-for="(v,k, i) in specialSpec">
              <dl>
                <dt>
                  <div class="fl title">
                    <i v-text="k"></i>
                  </div>
                </dt>
                <dd>
                  <a href="javascript:;" :class="{selected: indexes[k] === j, locked: locked(k, j)}" v-for="(o, j) in v"
                     @click="selectSku(k,j)"> <em v-text="o"></em>
                    <span v-show="indexes[k] === j" title="点击取消选择">&nbsp;</span>
                  </a>
                </dd>
              </dl>
            </div>

            <div class="summary-wrap">
              <div class="fl title">
                <div class="control-group">
                  <div class="controls">
                    <input autocomplete="off" type="text" disabled v-model="num" minnum="1" class="itxt"/>
                    <a href="javascript:void(0)" class="increment plus" @click="increment">+</a>
                    <a href="javascript:void(0)" class="increment mins" @click="decrement">-</a>
                  </div>
                </div>
              </div>
              <div class="fl">
                <ul class="btn-choose unstyled">
                  <li>
                    <a href="success-cart.html" @click.prevent="addCart" target="_blank"
                       class="sui-btn  btn-danger addshopcar">加入购物车</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--product-detail-->
      <div class="clearfix product-detail">
        <!--侧边-->
        <div class="fl aside">
          <ul class="sui-nav nav-tabs tab-wraped">
            <li class="active">
              <a href="#index" data-toggle="tab">
                <span>相关分类</span>
              </a>
            </li>
            <li>
              <a href="#profile" data-toggle="tab">
                <span>推荐品牌</span>
              </a>
            </li>
          </ul>
          <div class="tab-content tab-wraped">
            <div id="index" class="tab-pane active">
              <ul class="part-list unstyled">
                <li>手机</li>
                <li>手机壳</li>
                <li>内存卡</li>
                <li>Iphone配件</li>
                <li>贴膜</li>
                <li>手机耳机</li>
                <li>移动电源</li>
                <li>平板电脑</li>
              </ul>
              <ul class="goods-list unstyled">
                <li>
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="/img/_/part01.png"/>
                    </div>
                    <div class="attr">
                      <em>Apple苹果iPhone 6s (A1699)</em>
                    </div>
                    <div class="price">
                      <strong>
                        <em>¥</em>
                        <i>6088.00</i>
                      </strong>
                    </div>
                    <div class="operate">
                      <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="/img/_/part02.png"/>
                    </div>
                    <div class="attr">
                      <em>Apple苹果iPhone 6s (A1699)</em>
                    </div>
                    <div class="price">
                      <strong>
                        <em>¥</em>
                        <i>6088.00</i>
                      </strong>
                    </div>
                    <div class="operate">
                      <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="/img/_/part03.png"/>
                    </div>
                    <div class="attr">
                      <em>Apple苹果iPhone 6s (A1699)</em>
                    </div>
                    <div class="price">
                      <strong>
                        <em>¥</em>
                        <i>6088.00</i>
                      </strong>
                    </div>
                    <div class="operate">
                      <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                    </div>
                  </div>
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="/img/_/part02.png"/>
                    </div>
                    <div class="attr">
                      <em>Apple苹果iPhone 6s (A1699)</em>
                    </div>
                    <div class="price">
                      <strong>
                        <em>¥</em>
                        <i>6088.00</i>
                      </strong>
                    </div>
                    <div class="operate">
                      <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                    </div>
                  </div>
                  <div class="list-wrap">
                    <div class="p-img">
                      <img src="/img/_/part03.png"/>
                    </div>
                    <div class="attr">
                      <em>Apple苹果iPhone 6s (A1699)</em>
                    </div>
                    <div class="price">
                      <strong>
                        <em>¥</em>
                        <i>6088.00</i>
                      </strong>
                    </div>
                    <div class="operate">
                      <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div id="profile" class="tab-pane">
              <p>推荐品牌</p>
            </div>
          </div>
        </div>
        <div class="fr detail">
          <!--搭配-->
          <div class="clearfix fitting">
            <h4 class="kt">选择搭配</h4>
            <div class="good-suits">
              <div class="fl master">
                <div class="list-wrap">
                  <div class="p-img">
                    <img src="/img/_/l-m01.png"/>
                  </div>
                  <em>￥5299</em>
                  <i>+</i>
                </div>
              </div>
              <div class="fl suits">
                <ul class="suit-list">
                  <li class="">
                    <div id="">
                      <img src="/img/_/dp01.png"/>
                    </div>
                    <i>Feless费勒斯VR</i>
                    <label data-toggle="checkbox" class="checkbox-pretty">
                      <input type="checkbox"><span>39</span>
                    </label>
                  </li>
                  <li class="">
                    <div id="a"><img src="/img/_/dp02.png"/></div>
                    <i>Feless费勒斯VR</i>
                    <label data-toggle="checkbox" class="checkbox-pretty">
                      <input type="checkbox"><span>50</span>
                    </label>
                  </li>
                  <li class="">
                    <div id="b"><img src="/img/_/dp03.png"/></div>
                    <i>Feless费勒斯VR</i>
                    <label data-toggle="checkbox" class="checkbox-pretty">
                      <input type="checkbox"><span>59</span>
                    </label>
                  </li>
                  <li class="">
                    <div id="c"><img src="/img/_/dp04.png"/></div>
                    <i>Feless费勒斯VR</i>
                    <label data-toggle="checkbox" class="checkbox-pretty">
                      <input type="checkbox"><span>99</span>
                    </label>
                  </li>
                </ul>
              </div>
              <div class="fr result">
                <div class="num">已选购0件商品</div>
                <div class="price-tit"><strong>套餐价</strong></div>
                <div class="price">￥5299</div>
                <button class="sui-btn  btn-danger addshopcar">加入购物车</button>
              </div>
            </div>
          </div>
          <div class="tab-main intro">
            <!--导航-->
            <ul class="sui-nav nav-tabs tab-wraped">
              <li class="active">
                <a href="#one" data-toggle="tab">
                  <span>商品介绍</span>
                </a>
              </li>
              <li>
                <a href="#two" data-toggle="tab">
                  <span>规格与包装</span>
                </a>
              </li>
              <li>
                <a href="#three" data-toggle="tab">
                  <span>售后保障</span>
                </a>
              </li>
            </ul>
            <div class="clearfix"></div>

            <div class="tab-content tab-wraped">
              <!--参数预览-->
              <div id="one" class="tab-pane active">
                <ul class="goods-intro-list unstyled" style="list-style: none;">
                  <li>分辨率：1920*1080(FHD)</li>
                  <li>后置摄像头：1200万像素</li>
                  <li>前置摄像头：500万像素</li>
                  <li>核 数：其他</li>
                  <li>频 率：以官网信息为准</li>
                  <li>品牌： Apple</li>
                  <li>商品名称：APPLEiPhone 6s Plus</li>
                  <li>商品编号：1861098</li>
                  <li>商品毛重：0.51kg</li>
                  <li>商品产地：中国大陆</li>
                  <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                  <li>系统：苹果（IOS）</li>
                  <li>像素：1000-1600万</li>
                  <li>机身内存：64GB</li>
                </ul>
                <!--商品详情-->
                <div class="intro-detail" v-html="spuDetail.description">
                </div>
              </div>
              <!--规格包装-->
              <div id="two" class="tab-pane">
                <div class="Ptable">
                  <div class="Ptable-item" v-for="g in specs">
                    <h3 v-text="g.name"></h3>
                    <dl v-for="p in g.params">
                      <dt v-text="p.name"></dt>
                      <dd v-text="specValue(p)"></dd>
                    </dl>
                  </div>
                </div>
                <div class="package-list">
                  <h3>包装清单</h3>
                  <p v-text="spuDetail.packingList"></p>
                </div>

              </div>
              <div id="three" class="tab-pane">
                <p v-text="spuDetail.afterService"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--like-->
      <div class="clearfix"></div>
      <div class="like">
        <h4 class="kt">猜你喜欢</h4>
        <div class="like-list">
          <ul class="yui3-g">
            <li class="yui3-u-1-6">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="/img/_/itemlike01.png"/>
                </div>
                <div class="attr">
                  <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>3699.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有6人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-6">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="/img/_/itemlike02.png"/>
                </div>
                <div class="attr">
                  <em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4388.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-6">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="/img/_/itemlike03.png"/>
                </div>
                <div class="attr">
                  <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4088.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-6">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="/img/_/itemlike04.png"/>
                </div>
                <div class="attr">
                  <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4088.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-6">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="/img/_/itemlike05.png"/>
                </div>
                <div class="attr">
                  <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4088.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
            <li class="yui3-u-1-6">
              <div class="list-wrap">
                <div class="p-img">
                  <img src="/img/_/itemlike06.png"/>
                </div>
                <div class="attr">
                  <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                </div>
                <div class="price">
                  <strong>
                    <em>¥</em>
                    <i>4088.00</i>
                  </strong>
                </div>
                <div class="commit">
                  <i class="command">已有700人评价</i>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  
<div class="clearfix footer"></div>

    <foot> </foot>

    <side-panel> </side-panel>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>
<script src="/js/pages/top.js"></script>
<script src="/js/pages/shortcut.js"></script>
<script src="/js/pages/side-panel.js"></script>
<script src="/js/pages/foot.js"></script>

<script>
  let skus = {*skuList*};
  const itemVm = new Vue({
    el: "#itemApp",
    data: {
      ly,
      name: "{{name}}", // 商品名称
      categories: {*categories*},// 商品分类
      brand: {*brand*},// 品牌
      skuList: [], // sku集合
      spuDetail: {*detail*},// 商品详情
      specs: {*specs*},// 规格组及规格参数
      num: 1, // 购买数量
      indexes: {},// 索引
    },
    created() {
      // detail
      this.spuDetail.specification = JSON.parse(this.spuDetail.specification);
      // sku
      const skuMap = {};
      skus.forEach(s => {
        skuMap[s.indexes] = s;
      });
      this.skuList = skuMap;

      let obj = {};
      this.specs.forEach(group => {
        if(!group.params || group.params.length < 1){
          console.error("商品规格参数数据有误");
          return;
        }
        group.params.forEach(param => {
          param.value = this.spuDetail.specification[param.id];
          if (!param.generic) {
            obj[param.name] = 0;
          }
        })
      });
      this.indexes = obj;
    },
    methods: {
      locked(key, index) {
        if (this.indexes[key] === index) return false;
        // 判断当前组合是否存在
        const {...o} = this.indexes;
        o[key] = index;
        const indexes = Object.values(o).join("_");
        return !this.skuList[indexes];
      },
      selectSku(key, index) {
        const isLocked = this.locked(key, index);
        // 无论如何，都允许修改
        this.indexes[key] = index;
        // 判断当前项是否可选
        if (!isLocked) {
          // 可选，直接返回
          return;
        }
        // 如果不可选，寻找可选的索引
        this.chooseCorrectIndex(key, index);
      },
      chooseCorrectIndex(key, index) {
        // 组织索引的二维数组
        const arr = [];
        Object.keys(this.specialSpec).forEach(k => {
          if (k === key) {
            arr.push([index])
          } else {
            arr.push(Array.from({length: this.specialSpec[k].length}, (v, k) => k));
          }
        });
        // 计算各种组合
        const indexArr = arr.reduce((last, current) => {
          const array = [];
          last.forEach(par1 => {
            current.forEach(par2 => {
              array.push(par1 + "_" + par2);
            });
          });
          return array;
        });
        // 寻找合适的索引
        const indexes = indexArr.find(s => this.skuList[s]).split("_");
        const {...obj} = this.indexes;
        Object.keys(obj).forEach((k, i) => {
          obj[k] = parseInt(indexes[i]);
        });
        this.indexes = obj;
      },
      specValue(p) {
        return p.generic ? p.value : p.value[[this.indexes[p.name]]];
      },
      decrement() {
        if (this.num > 1) {
          this.num--;
        }
      },
      increment() {
        this.num++;
      },
      addCart() {
        const cartItem = {
          skuId: this.sku.id,
          title: this.sku.title,
          image: this.images[0],
          price: this.sku.price,
          num: this.num,
          spec: this.sku.specialSpec
        };
        // 判断是否登录
        ly.http.get("/user/info/me").then(() => {
          // 已登录
          ly.http.post("/trade/cart", cartItem).then(() => {
            // 跳转到购物车列表页
            window.location.href = "http://www.leyou.com/cart.html";
          }).catch(() => {
            alert("添加购物车失败，请重试！");
          })
        }).catch(() => {
          // 获取以前的购物车
          const carts = ly.store.get("carts") || [];
          // 获取与当前商品id一致的购物车数据
          const cart = carts.find(c => c.skuId === this.sku.id);
          if (cart) {
            // 存在，修改数量
            cart.num += this.num;
          } else {
            // 不存在，新增
            //cartItem.spec = JSON.parse(cartItem.specialSpec);
            carts.push(cartItem);
          }
          // 未登录
          ly.store.set("carts", carts);
          // 跳转到购物车列表页
          window.location.href = "http://www.leyou.com/cart.html";
        })
      },
    },
    watch: {
      indexes: {
        deep: true,
        handler() {
          console.log(1);
        }
      }
    },
    computed: {
      specialSpec() {
        const obj = {};
        this.specs.forEach(group => {
          group.params.forEach(param => {
            if (!param.generic) {
              obj[param.name] = param.value;
            }
          })
        });
        return obj;
      },
      sku() {
        const indexes = Object.values(this.indexes).join("_");
        return this.skuList[indexes];
      },
      images() {
        if (!this.sku) return [];
        return this.sku.images ? this.sku.images.split(",") : [];
      }
    }
  });
</script>

<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
  $(function () {
    $("#service").hover(function () {
      $(".service").show();
    }, function () {
      $(".service").hide();
    });
    $("#shopcar").hover(function () {
      $("#shopcarlist").show();
    }, function () {
      $("#shopcarlist").hide();
    });

  })
</script>
<script type="text/javascript" src="/js/model/cartModel.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
<script type="text/javascript" src="/index/index.js"></script>
</body>

</html>